<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>潜在客户管理</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
    <!-- <link rel="stylesheet" href="../css/public.css" media="all"> -->
    <link id="layuicss-layer" rel="stylesheet" href="../../layui_files/layer.css" media="all">
    <!--    <script src="js/jquery-1.9.1.min.js"></script>-->
</head>
<div style="display: none;" id="saveDiv1">
<form class="layui-form" action="" lay-filter="dataFrm1" id="dataFrm1"  >
    <div class="layui-form-item" style="visibility: hidden;">
        <label class="layui-form-label">id</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="id" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门编号</label>
        <div class="layui-input-block">
            <input style="width: 250px" type="text" name="sn" required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>
<div style="display: none;" id="UpdateDiv">
    <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm1"  >
        <div class="layui-form-item" style="visibility: hidden;">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="id" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-block">
                <input style="width: 250px" type="text" name="sn" required  lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    </div>

<!-- 增加/修改弹出层div结束 -->
<!-- 主界面开始 -->
<div class="box">
    <div class="layui-card">
        <div class="layui-card-header" ><h1 style="color: #1E9FFF;"><strong>潜在客户管理</strong></h1></div>
        <div class="" style="margin: 10px 10px 10px 10px;">

            <fieldset class="fieldset" style="border: 1px solid darkgray;">
                <legend style="font-size: large;">搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="keyword" autocomplete="off" class="layui-input" placeholder="请输入姓名/电话">
                                </div>
                            </div>
                            <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <select lay-verify="required">
                                            <option value="1" selected>潜在客户</option>
                                            <option value="2">正式客户</option>
                                        </select>
                                    </div>
                            </div>

                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i> 查 询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>

        <div class="layui-card-body">
            <table class="layui-table" id="table" lay-filter="test"></table>
        </div>
        <div id="pageDemo" style="text-align: center"></div>
    </div>
    <!-- 跟进功能弹出层div结束 -->

<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="insert">添加客户</button>
    </div>
</script>

<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="trace">跟进</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="move">移交</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">修改状态（暂定del）</a>
</script>
<script>
    //声明要使用的layUI组件（全局）
    layui.use(["table","form","laypage"],function(){
        var table = layui.table;
        var $ =layui.jquery;
        var laypage = layui.laypage;
        $.ajaxSetup({
                // 发送cookie
                xhrFields: {
                    withCredentials: true
                }
            });
        //前端接口（URL）接受后端数据进行数据表格的渲染
        var tableIns = table.render({
            elem:'#table',
            toolbar: '#toolbarDemo',
            url:'http://localhost:8888/permissions/queryPagePermissions',
            parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.items //解析数据列表
                    };
                },

                //设置表头
                cols:[[
                    {field:'select',type:"checkbox"},
                    {field:'id',title:'编号',sort:true,width:100},
                    {field:'name',title:'姓名',width:150},
                    {field:'email',title:'年龄',sort:true},
                    {field:'age',title:'性别'},
                    {field:'dept',title:'电话'},
                    {field:'role',title:'职业'},
                    {field:'role',title:'来源'},
                    {field:'role',title:'营销人员'},
                    {field:'role',title:'状态'},
                    {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right',width:350}
                ]],

                //分页
                page:{
                    layout:['prev','page','next','count']//,'limit','skip'
                    ,page:function(res){
                        return res.page
                    } //获取currentPage
    
                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
    
            });
            
            //头部工具栏事件监听
            table.on('toolbar(test)',function (obj){
                //打印事件名
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                    console.log(checkStatus);
        
                    // 获取事件名
                    var eventName = obj.event;
                    switch (eventName){
                        case "getCheckData":
                            var arr = checkStatus.data;
                            layer.alert(JSON.stringify(arr));
                            break;
        
                        case "getCheckLength":
                            var arr = checkStatus.data;
                            layer.msg("选中了"+arr.length+"条数据！");
                            break;
        
                        case "isAll":
                            var flag = checkStatus.isAll;
                            var str = flag ? '全选' : '未全选' ;
                            layer.msg(str);
                            break;
                    }
                //行工具栏事件
                table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    if(layEvent === 'del'){ //删除
                        layer.confirm('真的删除行么', function(index){
                            // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            console.log(data);
                            console.log(data.id);
                            layer.close(layer.index);
                            $.ajax({
                                url:'http://localhost:8888/permissions/deleteRole', //删除数据接口
                                type: 'POST',
                                data: {
                                    id:data.id
                                },
                                success:function(res){
                                    alert("删除成功");

                                    //重新加载数据表格
                                    tableIns.reload();
                                },
                                error:function(){
                                    alert("删除失败");
                                },
                            })
                        });
                    }else if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                        openUpdate(data);
                    }
                });
            });
        var url;
        var mainIndex;
        //新增方法（函数）
        function  openAdd(data){
            console.log(data);
            var url="/http://localhost:8888/permissions/addPermissions";
            mainIndex=layer.open({
                type:1,
                title:'新增',
                content:$("#saveDiv1"),
                area:['800px','400px'],
                success:function (){
                    $("#dataFrm1")[0].reset();
                    url="http://localhost:8888/permissions/addPermissions";
                }
            });
        }
         //修改方法（函数）
         function openUpdate(obj){
                // var obj = $("[name='id']").val();
                console.log(obj)
                var url="/http://localhost:8888/permissions/updatePermissions";
                mainIndex=layer.open({
                    type:1,
                    title:'编辑',
                    content:$("#UpdateDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrom",obj);
                        url="/http://localhost:8080/permissions/updatePermissions";
                    }
                });
            }
        // 新增/修改表单监听提交
        form.on('submit(doSubmit1)', function(obj){
                //序列化/提交表单
                var params = $("#dataFrom").serialize();
                //打印获取到的数据
                alert(params);
                var index = layer.msg("数据提交中，请稍后",{
                    icon:16,
                    time:false,
                    shade:0.8
                }); 
                var url="http://localhost:8888/permissions/addPermissions";
                
                if(data != null&&data !=''){
                    url="http://localhost:8888/permissions/addPermissions";
                }
                // 关闭弹出层
                    layer.close(mainIndex);
    
                    //刷新表格
                    tableIns.reload();
            });
              // 新增/修改表单监听提交
            form.on('submit(doSubmit2)', function(obj){
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                url="http://localhost:8888/permissions/updatePermissions";
                var data = $("[name='id']").val()
                $.post(url,obj.field,function (result){
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                    
                    //关闭弹出层
                    // layer.close(mainIndex);

                    //刷新表格
                    // tableIns.reload();
                })
            });
    });
</script>
</body>
</html>